<template>
	<div id="searchList">
		<div class="search-header">
      <div class="back"><van-icon name="arrow-left" /></div>
      <van-search v-model="value" placeholder="请输入搜索关键词" />
    </div>
    <van-dropdown-menu active-color="#1989fa">
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
    </van-dropdown-menu>
    <van-row class="list-total">
      <van-col span="12">已查询出<span>10</span>条相关结果</van-col>
      <van-col span="12">第1/200页</van-col>
    </van-row>
    <div class="company-list">
      <div class="company-header">
        <van-row>
          <van-col span="4">
            <img src="@/assets/logo.png" alt="">
          </van-col>
          <van-col span="20">
            <p>浙江杭州法兰特超声波科技服务有限公司</p>
            <p>
              <van-tag class="blue">客</van-tag>
              <van-tag class="green">内</van-tag>
              <van-tag class="purple">商</van-tag>
              <van-tag>标签</van-tag>
            </p>
          </van-col>
        </van-row>
        <van-row class="column-3">
          <van-col span="8">
            <p>法定代表人</p>
            <p>张大仙</p>
          </van-col>
          <van-col span="8">
            <p>注册资本</p>
            <p>张大仙</p>
          </van-col>
          <van-col span="8">
            <p>成立日期</p>
            <p>张大仙</p> 
          </van-col>
        </van-row>
      </div>
      <div class="company-header">
        <van-row>
          <van-col span="4">
            <img src="@/assets/logo.png" alt="">
          </van-col>
          <van-col span="20">
            <p class="name">
              浙江杭州法兰特超声波科技服务有限公司少时诵诗书所所所所所所所所所所所<van-tag plain  class="line-green">标签</van-tag>
            </p>
            <p>
              <van-tag class="blue">客</van-tag>
              <van-tag class="green">内</van-tag>
              <van-tag class="purple">商</van-tag>
              <van-tag>标签</van-tag>
            </p>
          </van-col>
        </van-row>
        <van-row class="column-3">
          <van-col span="8">
            <p>法定代表人</p>
            <p>张大仙</p>
          </van-col>
          <van-col span="8">
            <p>注册资本</p>
            <p>张大仙</p>
          </van-col>
          <van-col span="8">
            <p>成立日期</p>
            <p>张大仙</p> 
          </van-col>
        </van-row>
      </div>
    </div>
	</div>
</template>

<script>
export default {
  name:'searchList',
	components:{

	},
	data () {
		return {
      value1: 0,
      value2: 'a',
      option1: [
        { text: '外部数据源', value: 0 },
        { text: '内部数据源', value: 1 },
      ],
      option2: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' },
      ],
		}
	},
	methods:{

	}
}
</script>

<style lang="scss">
#searchList{
  background-color: #F4F5F7;
  .van-dropdown-menu__bar{
    box-shadow: none;
  }
  .search-header{
    display: flex;
    .back{
      display: flex;
      justify-content: center;
      align-items: center;
      padding-left: 10px;
      background: #fff;
      .van-icon-arrow-left{
        font-size: 24px;
      }
    }
    .van-search{
      width: 100%;
    }
  }
  .list-total{
    height: 36px;
    line-height: 36px;
    padding: 0 20px;
    width: 100%;
    background-color: #F4F5F7;
    color: #858B9C;
    font-size: 13px;
    .van-col:nth-of-type(2){
      text-align: right;
    }
    span{
      color: #FC5051;
      padding: 0 5px;
    }
  }
  .company-list{
  }
  .company-header{
    padding-top: 16px;
    padding-left: 6px;
    background-color: #FFF;
    margin-bottom: 12px;
    .van-col--4{
      text-align: center;
      img{
        width: 40px;
        border: 1px solid #DDDDDD;
        border-radius: 3px;
      }
    }
    .van-col--20{
      .van-tag{
        margin-right: 6px;
      }
      p{
        margin-bottom: 8px;
        &.name{
          padding-right: 72px;
          position: relative;
          .van-tag{
            position: absolute;
            right: 16px;
            top: 5px;
          }
        }
      }
    }
    .column-3{
      padding: 10px 20px;
      text-align: center;
      .van-col{
        p{
          margin-bottom: 6px;
          &:nth-of-type(1){
            color: #858B9C;
          }
        }
      }

    }
  }
}
</style>
